<template>
    <div class="main">
        <div class="left-sider">
            <div>
                <Avatar :userId="userId" :width="35" :showDetail="false"></Avatar>
            </div>
            <!-- 左上方按钮 -->
            <div class="menu-list">
                <template v-for="item in menuList">
                    <div :class="['tab-item iconfont', item.icon, route.path.indexOf(item.path) != -1 ? 'active' : '']"
                        v-if="item.position == 'top'" :key="item.name" @click="changeView(item)">
                        <!-- 提醒气泡 -->
                        <template v-if="item.name == 'chat' || item.name == 'contact'">
                            <Badge :count="messageCountStore.getCount(item.countKey)" :top="3" :left="15"></Badge>
                        </template>
                    </div>
                </template>
            </div>
            <!-- 左下方按钮 -->
            <div class="menu-list menu-bottom">
                <template v-for="item in menuList">
                    <div :class="['tab-item iconfont', item.icon, route.path.indexOf(item.path) != -1 ? 'active' : '']"
                        v-if="item.position == 'bottom'" :key="item.name" @click="changeView(item)">
                    </div>
                </template>
            </div>
        </div>
        <!-- 右侧窗体 -->
        <div class="right-container">
            <router-view v-slot="{ Component }">
                <!-- 切换路由，比如说切到好友界面，还是要正常接收聊天界面的消息通知，使用keep-alive -->
                <keep-alive include="chat">
                    <component :is="Component" ref="componentRef"></component>
                </keep-alive>
            </router-view>
        </div>
    </div>
    <!-- 关闭时最小化到托盘 -->
    <WinOp :closeType="1"></WinOp>
    <Update :autoUpdate="true"></Update>
</template>

<script setup>
import Update from "./Update.vue";
import { component } from "v-viewer";
import { ref, reactive, getCurrentInstance, nextTick, onMounted, onUnmounted } from "vue"
const { proxy } = getCurrentInstance();
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute();

import { useMessageCountStore } from "@/stores/MessageCountStore";
const messageCountStore = useMessageCountStore();

const menuList = ref([
    {
        name: "chat",
        icon: 'icon-xiaoxi',
        path: "/chat",
        countKey: "chatCount",
        position: "top"
    },
    {
        name: "contact",
        icon: 'icon-icon-',
        path: "/contact",
        countKey: "contactApplyCount",
        position: "top"
    },
    {
        name: "setting",
        icon: 'icon-shezhi',
        path: "/setting",
        position: "bottom"
    }
])

/* 点击切换窗口 */
const changeView = (item) => {
    router.push(item.path)
    // console.log("route path: ", route.path)
}

import { useUserInfoStore } from "@/stores/UserInfoStore";
const userInfoStore = useUserInfoStore();
const userId = ref('')

import { useGlobalInfoStore } from "@/stores/GlobalInfoStore";
const globalInfoStore = useGlobalInfoStore();

/* 在Main标签页中设定用户信息和全局信息（本地服务器端口），这样在子界面刷新的时候不会丢失 */
const getUserInfo = async () => {
    // 设置用户信息
    let result = await proxy.Request({
        url: proxy.Api.getUserInfo,
    })
    if (!result) {
        return;
    }
    userInfoStore.setUserInfo(result.data);
    userId.value = userInfoStore.getUserInfo().userId;
    // 设置全局信息，从主进程获取（serverPort用setUserInfo保存的，key就是像下面这样子，详见主进程store.js）
    const serverPort = await myApi.getLocalStore(`user_${result.data.userId}_serverPort`);
    globalInfoStore.setInfo("serverPort", serverPort);
}

/* 保存系统设置 */
import { useSysSettingStore } from "../stores/SysSettingStore";
const sysSettingStore = useSysSettingStore();

const getSysSetting = async () => {
    let result = await proxy.Request({
        url: proxy.Api.getSysSetting,
    })
    if (!result) {
        return;
    }
    // console.log("sysSetting: ", result.data)
    sysSettingStore.setSysSetting(result.data);
    myApi.setLocalStore({ key: "sysSetting", value: result.data })
}

const getMessageCount = async () => {
    // 获取未读申请信息数量
    const setting = await myApi.getUserSetting()
    const noReadCount = setting.contactNoRead
    // 更新渲染进程状态信息
    messageCountStore.setCount('contactApplyCount', noReadCount, true)
    // console.log("noReadCount: ", noReadCount)
}

myApi.onReLogin((event, data) => {
    // 切换到登录界面
    router.push("/login")
})

import { useAvatarInfoStore } from "@/stores/AvatarInfoStore";
const avatarInfoStore = useAvatarInfoStore()

myApi.onSetForceReload((event, data) => {
    avatarInfoStore.setForceReload(data.id, data.value)
})

onMounted(async () => {
    await getUserInfo();
    await getSysSetting();
    await getMessageCount();
})
onUnmounted(() => {
    myApi.removeAllListeners('reLogin');
    myApi.removeAllListeners('setForceReload');
})
</script>

<style lang="scss" scoped>
.main {
    background: #ddd;
    display: flex;
    border-radius: 0px 3px 3px 0px;
    overflow: hidden;

    .left-sider {
        width: 60px;
        background: #4d6f9b;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 35px;
        border: 1px solid #23272e;
        border-right: none;
        padding-bottom: 10px;

        .menu-list {
            width: 100%;
            flex: 1;

            .tab-item {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #d3d3d3;
                font-size: 22px;
                margin-top: 10px;
                cursor: pointer;
                position: relative;
            }

            .active {
                color: #48bef5;
            }
        }

        .menu-bottom {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
    }

    .right-container {
        flex: 1;
        overflow: hidden;
        border: 1px solid #23272e;
        border-left: none;
    }
}

.popover-user-panel {
    padding: 10px;

    .popover-user {
        display: flex;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
    }

    .send-message {
        text-align: center;
        margin-top: 10px;
        padding: 20px 0px 0px 0px;
    }
}
</style>
